<script setup>
import { ref, onMounted } from 'vue'
// import DiaLog from './DiaLog.vue'
import { getSystemLogList } from '@/api/systemLog'
//    定义接收表格数据的变量
const tableData = ref('')
//    定义弹窗的ref值
// const dialog = ref('')

//    定义详情弹窗的变量
// const dialogVisible = ref(false)
//    定义分页的对象
const paging = ref({
  page: 1,
  pageSize: 20,
  total: null,
  key: '',
  time: null
})
const itemData = ref([])
//    条数控制表格
const handleSizeChange = (val) => {
  paging.value.pageSize = val
  getTableData()
}

//    页数控制表格
const handleCurrentChange = (val) => {
  paging.value.page = val
  getTableData()
}

//    获取表格数据
const getTableData = async () => {
  const res = await getSystemLogList(paging.value)
  console.log(res)
  tableData.value = res.data.records
  paging.value.total = res.data.total
}

//   搜索
const search = () => {
  try {
    if (itemData.value.length !== 0) {
      paging.value.time = itemData.value[0]
      getTableData()
    }
  } catch (error) {
    console.log(error)
  }
}

//    重置
const reset = () => {
  try {
    paging.value.key = ''
    itemData.value = ''
    getTableData()
  } catch (error) {
    console.log(error)
  }
}

// //   查看
// const view = async(id) => {
//   dialogVisible.value = true
//   dialog.value.getDetail(id)
// }

//   挂载完就调用
onMounted(() => {
  getTableData()
})
</script>
<template>
  <div class="system-log">
    <div class="header">
      <div class="l-header">
        <div class="title">
          <p>关键字</p>
          <el-input v-model="paging.key" placeholder="请输入操作人关键词" size="large"></el-input>
        </div>
        <div class="title">
          <p>选择时间</p>
          <el-date-picker
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            v-model="itemData"
            type="date"
            placeholder="请选择日期"
            size="large"
          />
        </div>
      </div>
      <div class="r-header">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button style="background-color: #eaeaea" @click="reset">重置</el-button>
      </div>
    </div>
    <div class="footer">
      <el-table
        :data="tableData"
        :header-cell-style="{
          backgroundColor: '#f2f2f2',
          fontSize: '13px',
          color: '#000',
          fontWeight: 'bold'
        }"
        border
        style="width: 100%"
        empty-text="暂无数据"
      >
        <el-table-column label="序号" type="index" width="75" align="center" />
        <el-table-column prop="operName" label="用户名" width="110" align="center" />
        <el-table-column prop="method" label="请求方式" width="110" align="center" />
        <el-table-column prop="operUrl" label="访问地址" width="180" align="center" />
        <el-table-column prop="title" label="模块名称" width="160" align="center" />
        <el-table-column prop="operIp" label="登录IP" width="180" align="center" />
        <el-table-column prop="operTime" label="操作时间" width="180" align="center" />
        <el-table-column label="操作" align="center">
          <template #default>
            <el-button type="text">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination
          v-model:current-page="paging.page"
          v-model:page-size="paging.pageSize"
          :page-sizes="[20, 40, 60, 80, 100]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="paging.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!-- <DiaLog ref="dialog" v-model="dialogVisible"></DiaLog> -->
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-pagination__goto) {
  cursor: pointer;
}

.system-log {
  :deep(.el-input__wrapper) {
    border-radius: 10px;
    background-color: #eaf1ef;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .l-header {
      display: flex;
      padding: 20px;
      .title {
        display: flex;
        flex-direction: column;
        margin-right: 30px;
        p {
          margin-bottom: 10px;
          color: #666666;
          font-size: 14px;
        }
      }
    }
    .r-header {
      display: flex;
      padding: 20px;
      .el-button {
        width: 85px;
        height: 38px;
        border-radius: 38px;
      }
    }
  }
  .footer {
    margin-top: 20px;
    .paging {
      display: flex;
      justify-content: center;
      padding: 20px;
    }
  }
}
</style>
